<template>
	<view class="ongoing flex--col" v-else>
		<Loading v-if="loading">正在努力加载中...</Loading>
		<template v-else>
			<RealtimePosition></RealtimePosition>
			<RecordMark>
				<text>等待碰面</text>
			</RecordMark>
			<view class="figure-list flex--row">
				<FigureIndentity :role="Role.ROLE_VOLUNTEER" :figure="volunteer"></FigureIndentity>
				<FigureIndentity :role="Role.ROLE_BLIND" :figure="blind"></FigureIndentity>
			</view>
			
			<VerifyPanel 
				@validateCaptcha="handleValidateCaptcha"
				:captcha="captcha" 
				:role="role"
				:verifyStatus="status" >
				<template #verifyCode> 
					   {{captcha || "对方离线中"}}
				</template>
				<template #locationMap>
					  <LocationMap 
								   :height="90" 
								   :userPosition="blind"
								   :volunteerPosition="volunteer"
								   :locatePosition="locatePosition">
					  </LocationMap>
				</template>
			</VerifyPanel>
		</template>
	</view>
</template>

<script>
	import Loading from "@/components/Loading/Loading.vue"
	import RealtimePosition from "@/components/RealtimePosition/RealtimePosition.vue"
	import RecordMark from "@/pages/track/components/RecordMark.vue"
	import VerifyPanel from "./components/VerifyPanel.vue"
	import FigureIndentity from "./components/FigureIdentity.vue"
	import * as WS from "@/core/constant/WebSocketEvent.js"
	import * as Travel from "@/core/constant/travel.js"
	import * as Role from "@/core/constant/role.js"
	import {checkRole,navToTravel} from "@/core/app.js"
	import * as TravelApi from "@/api/travel/travel.js"
	
	export default {
		components:{
			FigureIndentity,
			VerifyPanel,
			RealtimePosition,
			RecordMark,
			Loading
		},
		data(){
			return {
				travelData:{},
				volunteer:{},
				blind:{},
				status:0,
				captcha:'',	
				role:Role.ROLE_UNDEFINED,
				Role,
				Travel,
				loading:true
			}
		},
		computed:{
			locatePosition(){
				if(checkRole() === Role.ROLE_BLIND){
					return this.blind
				}
				else{
					return this.volunteer
				}
			}
		},
		watch:{
			async status(newVal){
				if(newVal === Travel.ONLINE_SUCCESS && this.role === Role.ROLE_BLIND){
					await this.getCaptcha()
				}
			}
		},
		methods:{
			/**
			 * 志愿者端：用于处理WebSocket返回消息
			 * @param {Object} data
			 */
			handleVolunteerMessage(code){
				if(code){
					console.log("志愿者端获取验证码")
					this.captcha = code
					return
				}	
				
			},
			/**
			 * 盲人端：用于处理WebSocket返回消息
			 * @param {Object} data
			 */
			async handleBlindMessage(data){
				const message = data.data
				if(this.status === Travel.ONLINE_SUCCESS){
					const {meetStatus} = message
					meetStatus === 2 && this.handleMeetSuccess()  
				}
			},
			
			/**
			 * 心跳的回调函数：刷新定位
			 * @param {Object} data
			 */
			handleHeartBeat(data){
				console.log(data)
				this.blind.pointX = data.userPointX 
				this.blind.pointY = data.userPointY
				this.volunteer.pointX = data.volunteerPointX
				this.volunteer.pointY = data.volunteerPointY
				this.blind.status = data.userStatus
				this.volunteer.status = data.volunteerStatus
				
				console.log(this.volunteer.status)
				console.log(this.blind.status)
				if(this.volunteer.status === 0){
					this.status = Travel.ONLINE_VOLUNTEER
				}
				if(this.blind.status === 1 && this.volunteer.status === 1){	
					this.status = Travel.ONLINE_SUCCESS
				}	
			},
			/**
			 * 志愿者端：用于校验验证码
			 * @param {Object} inputCaptcha
			 */
			async handleValidateCaptcha(inputCaptcha){
				if(this.captcha !== inputCaptcha){
					this.$toast("验证码错误")
					return
				}
				await this.meetSuccess()
				this.handleMeetSuccess()
			},
			/**
			 * 志愿者端：处理验证码成功时页面逻辑
			 */
			handleMeetSuccess(){
				this.status = Travel.VERIFY_SUCCESS
				const options = {
					travelId:this.travelData.travelId
				}
				this.$store.dispatch("travel/setCurrentTravelStatus",Travel.TRAVEL_GOING)
				navToTravel()
			},
			/**
			 * 志愿者端：验证码成功时调用此函数
			 */
			async meetSuccess(){
				const data = this.travelData.travelId
				await TravelApi.meetSuccess(data)
			},
			
			/**
			 * 盲人端：获取验证码
			 */
			async getCaptcha(){
				const {code} = await TravelApi.getCaptcha(this.volunteer.id)
				this.captcha = code
			},
			/**
			 * 初始化页面：获取出行数据
			 * @param {Object} travelId
			 */
			async getMeetData(travelId){
				const travel = await TravelApi.meetTravel(travelId)
				if(travel.travelStatus === 5){
					// 如果该出行已经正在进行了,防止ws断开
					this.handleMeetSuccess()
				}
				this.volunteer = {
						name: travel.name2 ,
						id:travel.volunteerId,
						pointX:0,pointY:0,
						img:travel.volunteerAvatar,
						status:0
						}
				this.blind = {
						name:travel.name,
						id:travel.userId,
						pointX:0,pointY:0,
						img:travel.userAvatar,
						status:0
						}
				
				this.travelData = travel
			},
			/**
			 * 初始化页面：建立Socket连接
			 * @param {Object} travelId
			 */
			initSocketCallBack(){
				if(this.role === Role.ROLE_BLIND){
					uni.$on(WS.FORTHWITH_ASSIST_MEETSUCCESS,this.handleMeetSuccess)
				}else{
					uni.$on(WS.FORTHWITH_ASSIST_VERIFY,(data) => {
						console.log("---FORTHWITH_ASSIST_VERIFY----")
						this.handleVolunteerMessage(data)
					})
				}
				this.$store.dispatch("socket/startHeartBeatFn",{userId:this.blind.id,volunteerId:this.volunteer.id})
				this.$store.dispatch("socket/regHeartBeatCallback",this.handleHeartBeat.bind(this))
			},
			/**
			 * 初始化页面
			 * @param {Object} travelId
			 */
			async init(travelId){
				await this.getMeetData(travelId)
				this.status = this.role === Role.ROLE_BLIND ? Travel.ONLINE_BLIND:Travel.ONLINE_VOLUNTEER
				this.initSocketCallBack()
				const currentTravel = {
					...this.travelData,
					...this.$store.getters.currentTravel
				}
				currentTravel.name = this.travelData.name
				currentTravel.name2 = this.travelData.name2
				this.$store.dispatch("travel/setCurrentTravel",currentTravel)
			}
		},
		async onLoad(options){
			this.role = checkRole()
			this.status = this.$store.getters.curTravelStatus
			await this.init(parseInt(options.travelId))
			this.loading = false
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
		width:100%;
	}
	
	.ongoing{
		width:600rpx;
		height:100vh;
		overflow: scroll;
		margin: auto;
		align-items: flex-start;
		gap:24px;
	}
	
	.figure-list{
		width:100%;
		justify-content: space-between;
	}

</style>
